import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/advanced/shader_mask_page.dart';
import 'package:flutter_demo/pages/advanced/sliver_page.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

import '../../conf/m3.dart';

class ScaffoldPage extends PageWithTitle {
  const ScaffoldPage({super.key})
      : super(
            "页面脚手架(Scaffold、AppBar、Drawer、BottomSheet、FloatingActionButton、SnackBar、BottomNavigationBarItem)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("页面脚手架，是常见页面的构建框架，包含顶部导航、底部导航、侧滑菜单、底部抽屉、"
          "通知条、悬浮按钮等"),
      AppSpacer.large,
      ScaffoldExample(),
      AppSpacer.mini,
      UlItem("Scaffold"),
      BodyText("如简介所言，脚手架组件封装了一个构成常规页面所需的组件，通过它可以快速创建一个"
          "标准的页面，它自身会约束各个组件的位置关系避免遮挡（bottomSheet好像还是会被悬浮按"
          "钮遮挡？）"),
      LabelText("- appBar 设置一个AppBar组件作为标题栏"),
      LabelText("- body 页面的内容主体"),
      LabelText("- drawer 开始位置的侧滑菜单，与之对应的endDrawer是在结束位置显示的侧滑菜单"
          "，可以设置菜单状态监听，脚手架状态提供手动控制菜单开启关闭的方法，可以通过GlobalKey"
          "获取到ScaffoldState"),
      LabelText("- bottomSheet 常驻底部页面底部的组件"),
      NoticeText("若需要底部抽屉常用showBottomSheet"
          "(M2)或showModalBottomSheet(M3)来实现"),
      LabelText("- floatingActionButton 悬浮按钮"),
      NoticeText("SnackBar通过ScaffoldMessenger.of(context).showSnackBar来查找当前"
          "页面的脚手架，在其中显示一个轻量级通"),
      LabelText("- bottomNavigationBar 底部导航条"),
      AppSpacer.large,
      UlItem("AppBar"),
      BodyText("标题栏，包含了前导组件、标题、行为按钮组，其样式属性有非常多，这里不一一列举了"),
      NoticeText("如果需要标题栏协同列表滚动，请参考使用Sliver组件：SliverAppBar"),
      PageLink(SliverPage()),
      LabelText("- leading 前导组件，不设置时AppBar会根据当前页面是否可以返回自动显示返回"
          "按钮并实现点击返回上一页，若脚手架包含侧滑菜单，则该按钮会被替换成侧滑菜单打开按钮"),
      LabelText("- automaticallyImplyLeading 是否自动生成leading，默认为true，在不设置"
          "leading时有效"),
      LabelText("- title 标题组件，不必是文本，任意组件都可以作为标题，比如图片"),
      LabelText("- centerTitle 是否居中显示标题，默认是靠左挨着leading，右侧空间腾给actions"),
      LabelText("- actions 行为按钮组，可以直接添加IconButton，若按钮过多则通过"
          "PopupMenuButton来显示弹窗菜单，它有以下几种常用组件来快速实现菜单"),
      LabelText("    - PopupMenuItem 普通的菜单条目，构建组件传给他作为条目内容显示"),
      LabelText("    - CheckedPopupMenuItem 带选中功能的的菜单条目"),
      LabelText("    - PopupMenuDivider 默认的间隔线组件"),
      LabelText("- backgroundColor 一般不用设置，Material3默认是与页面背景同色的标题背景"
          "，当向下滚动页面中的列表时，背景色会自动调整为surfaceContainer"),
      AppSpacer.large,
      UlItem("Drawer"),
      BodyText("系统提供的侧滑菜单组件，封装了背景色、宽度、遮罩颜色等属性用于快速自定义样式"),
      AppSpacer.large,
      UlItem("FloatingActionButton"),
      BodyText("悬浮按钮组件"),
      LabelText("- tooltip 长按提示文本"),
      LabelText("- onPressed 点击事件"),
      LabelText("- child 按钮内容，一般用Icon"),
      AppSpacer.large,
      UlItem("BottomNavigationBar"),
      BodyText("底部导航条组件提供了丰富的选中状态样式设置，详细属性可查看方法介绍"),
      LabelText("- currentIndex 当前选中的条目序列"),
      LabelText("- onTap 点击条目时触发，开发者接收到对应item的序列，通过重建组件设置当前序列值即可更新状态"),
      LabelText("- items 条目列表，使用BottomNavigationBarItem快速创建图标|文字的条目组件"),
    ];
  }
}

class ScaffoldExample extends StatefulWidget {
  const ScaffoldExample({super.key});

  @override
  State<StatefulWidget> createState() {
    return _ScaffoldExampleState();
  }
}

class _ScaffoldExampleState extends State<ScaffoldExample> {
  var bottomMenuSelectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      padding: const EdgeInsetsDirectional.all(5),
      decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.surfaceContainer,
          borderRadius: M3.connerRadiusMedium),
      child: FittedBox(
        child: SizedBox(
          width: 360,
          height: 640,
          child: Scaffold(
            appBar: AppBar(
              centerTitle: true,
              title: const AutoSizeText(
                "标题",
                maxLines: 2,
              ),
              actions: [
                IconButton(
                  tooltip: "add action",
                  onPressed: () {},
                  icon: const Icon(Icons.add),
                ),
                IconButton(
                  tooltip: "edit action",
                  onPressed: () {},
                  icon: const Icon(Icons.edit),
                ),
                PopupMenuButton<String>(
                  tooltip: "more actions",
                  icon: const Icon(Icons.more_vert),
                  itemBuilder: (context) {
                    return [
                      PopupMenuItem(onTap: () {}, child: const Text("item 1")),
                      const PopupMenuDivider(),
                      PopupMenuItem(onTap: () {}, child: const Text("item 2")),
                      const PopupMenuDivider(),
                      PopupMenuItem(onTap: () {}, child: const Text("item 3")),
                      const PopupMenuDivider(),
                      CheckedPopupMenuItem(
                          checked: true,
                          onTap: () {},
                          child: const Text("checked item 4")),
                    ];
                  },
                ),
              ],
            ),
            body: const PagePadding(Skeleton()),
            drawer: Drawer(
              child: SafeArea(
                child: Column(
                  children: List.generate(10, (index) => Text("menu $index")),
                ),
              ),
            ),
            bottomSheet: Container(
              padding: const EdgeInsetsDirectional.all(M3.paddingM),
              child: InkWell(
                onTap: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return Container(
                          width: double.infinity,
                          padding: const EdgeInsetsDirectional.all(M3.paddingL),
                          child: ListView(
                            children: List.generate(
                              10,
                              (index) => Text("menu $index"),
                            ),
                          ),
                        );
                      });
                },
                child: const Text("常驻底部面板，点击我为你展示底部抽屉弹窗"),
              ),
            ),
            floatingActionButton: FloatingActionButton(
              tooltip: "点击显示一个SnackBar",
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: NoticeText("这是一个轻量级通知组件")));
              },
              child: const Icon(Icons.message),
            ),
            bottomNavigationBar: StatefulBuilder(
              builder: (context, setState) {
                return BottomNavigationBar(
                  onTap: (index) {
                    setState(() {
                      bottomMenuSelectedIndex = index;
                    });
                  },
                  currentIndex: bottomMenuSelectedIndex,
                  items: const [
                    BottomNavigationBarItem(
                        icon: Icon(Icons.home_outlined),
                        activeIcon: Icon(Icons.home),
                        label: "首页"),
                    BottomNavigationBarItem(
                        icon: Icon(Icons.add_box_outlined),
                        activeIcon: Icon(Icons.add_box),
                        label: "发布"),
                    BottomNavigationBarItem(
                        icon: Icon(Icons.account_box_outlined),
                        activeIcon: Icon(Icons.account_box),
                        label: "个人中心"),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}
